<!--
交易商分布的饼状图
-->
<template>
  <div class="place-pie">
    <div id="placePie" class="place-pie-chart" />
    <div class="place-number-container">
      <div class="place-title">累计交易商</div>
      <div class="place-number">
        11000
      </div>
    </div>
  </div>

</template>

<script>
import echarts from 'echarts'

export default {
  name: 'PlacePie',
  components: {
    // countTo
  },
  data() {
    return {
      startVal: 0,
      pieData: [
        { value: 60, name: '湖北' },
        { value: 36, name: '新疆' },
        { value: 23, name: '浙江' },
        { value: 14, name: '上海' },
        { value: 13, name: '安徽' },
        { value: 11, name: '江西' },
        { value: 10, name: '河南' },
        { value: 7, name: '江苏' },
        { value: 6, name: '广西' },
        { value: 6, name: '广东' },
        { value: 15, name: '其他' }
      ]
    }
  },
  mounted() {
    this.initPlacePie()
  },
  methods: {
    initPlacePie() {
      const myChart = echarts.init(document.getElementById('placePie'))
      let option

      option = {
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c}张 ({d}%)'

        },
        legend: {
          // formatter: function (name, a, b, c){
          //   console.log(name, a, b, c)
          //   return 'Legend ' + name;
          // },
          orient: 'vertical',
          width: 143,
          height: 150,
          right: 0,
          // top: 20,
          bottom: '30%',
          textStyle: {
            color: '#ffffff'
          }
        },
        series: [
          {
            name: '访问来源',
            type: 'pie',
            center: ['35%', '50%'],
            radius: ['40%', '70%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            emphasis: {
              label: {
                show: true,
                fontSize: '40',
                fontWeight: 'bold'
              }
            },
            labelLine: {
              show: false
            },
            data: this.pieData
            // itemStyle:{
            //   normal:{
            //     label:{
            //       show: true,
            //       formatter: '{b} : {c} ({d}%)'
            //     },
            //     labelLine :{show:true}
            //   }
            // }
          }
        ]
      }

      option && myChart.setOption(option)
    }
  }
}
</script>

<style lang="scss"  scoped>
.place-pie {
  height: 100%;
  width: 100%;
  position: relative;

  .place-number-container {
    position: absolute;
    top: 6%;
    right: 2%;
    color: #ffffff;
    .place-title{
      font-size: 28px;
      font-weight: 500;
      color: #FFFFFF;
      //line-height: 22px;
    }

    .place-number{
      font-size: 58px;
      margin-top: 20px;
      font-family: DIGITALDREAMFAT;
      font-weight: bold;
      color: #FFFFFF;
      line-height: 67px;
      //letter-spacing: 22px;
    }
  }

  /*padding-right: 200px;*/
}

.place-pie-chart {
  height: 100%;
  width: 100%;
}
</style>
